<keira-top-bar [handler]="handlerService"></keira-top-bar>

<div class="container-fluid editor-with-preview" [ngClass]="{ 'show-preview': questPreviewService.showPreview }">
  <span *ngIf="editorService.loading">Loading...</span>

  <div *ngIf="editorService.form && !!editorService.loadedEntityId && !editorService.loading">
    <div class="content-block">
      <keira-query-output
        [docUrl]="docUrl"
        [editorService]="editorService"
        (executeQuery)="editorService.save($event)"
      ></keira-query-output>
    </div>

    <form [formGroup]="editorService.form" class="form-group edit-form">
      <div class="content-block">
        <span class="category-title">Addon Base</span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="ID">ID</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The unique ID of the quest'"></i>
            <input [formControlName]="'ID'" id="ID" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="PrevQuestID">PrevQuestID</label>
            <keira-quest-selector-btn
              [control]="editorService.form.controls.PrevQuestID"
              [config]="{ name: 'PrevQuestID' }"
              [modalClass]="'modal-lg'"
            ></keira-quest-selector-btn>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'if > 0: previous quest id; if < 0 parent quest id'"></i>
            <input [formControlName]="'PrevQuestID'" id="PrevQuestID" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="NextQuestID">NextQuestID</label>
            <keira-quest-selector-btn
              [control]="editorService.form.controls.NextQuestID"
              [config]="{ name: 'NextQuestID' }"
              [modalClass]="'modal-lg'"
            ></keira-quest-selector-btn>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Contains the next quest id, in case PrevQuestId of that other quest is not sufficient.'"
            ></i>
            <input [formControlName]="'NextQuestID'" id="NextQuestID" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="MaxLevel">MaxLevel</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Maximum player level at which a character can get the quest.'"
            ></i>
            <input [formControlName]="'MaxLevel'" id="MaxLevel" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="AllowableClasses">AllowableClasses</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.AllowableClasses"
              [config]="{ flags: ALLOWABLE_CLASSES, name: 'AllowableClasses' }"
            ></keira-flags-selector-btn>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Use 0 to allow all classes'"></i>
            <input [formControlName]="'AllowableClasses'" id="AllowableClasses" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="SourceSpellID">SourceSpellID</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The spell ID cast on player upon starting the quest.'"></i>
            <keira-spell-selector-btn
              [control]="editorService.form.controls.SourceSpellID"
              [config]="{ name: 'SourceSpellID' }"
              [modalClass]="'modal-lg'"
            ></keira-spell-selector-btn>
            <input [formControlName]="'SourceSpellID'" id="SourceSpellID" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="ExclusiveGroup">ExclusiveGroup</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'If > 0: group of quests of which only one may be chosen and completed; if < 0  group of quests of which all must be completed and rewarded to start next quest'
              "
            ></i>
            <input [formControlName]="'ExclusiveGroup'" id="ExclusiveGroup" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="ProvidedItemCount">ProvidedItemCount</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Number of items given to the player (inserted in the player’s bags) upon accepting the quest.'"
            ></i>
            <input [formControlName]="'ProvidedItemCount'" id="ProvidedItemCount" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="SpecialFlags">SpecialFlags</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.SpecialFlags"
              [config]="{ flags: SPECIAL_FLAGS, name: 'SpecialFlags' }"
            ></keira-flags-selector-btn>
            <input [formControlName]="'SpecialFlags'" id="SpecialFlags" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>
      <div class="content-block">
        <span class="category-title">Addon Requirements</span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="RequiredSkillID">Req.SkillID</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Skill required to know to accept the quest. Use 0 for no skill required.'"
            ></i>
            <keira-skill-selector-btn
              [config]="{ name: 'RequiredSkillID' }"
              [control]="editorService.form.controls.RequiredSkillID"
            ></keira-skill-selector-btn>
            <input [formControlName]="'RequiredSkillID'" id="RequiredSkillID" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="RequiredSkillPoints">Req.SkillPoints</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Skill points required to have in order to accept the quest.'"
            ></i>
            <input [formControlName]="'RequiredSkillPoints'" id="RequiredSkillPoints" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="RequiredMinRepFaction">Req.MinRepFaction</label>
            <keira-faction-selector-btn
              [config]="{ name: 'RequiredMinRepFaction' }"
              [control]="editorService.form.controls.RequiredMinRepFaction"
            ></keira-faction-selector-btn>
            <input
              [formControlName]="'RequiredMinRepFaction'"
              id="RequiredMinRepFaction"
              type="number"
              class="form-control form-control-sm"
            />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="RequiredMinRepValue">Req.MinRepValue</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Players must have this reputation or higher in order to receive the quest.'"
            ></i>
            <input [formControlName]="'RequiredMinRepValue'" id="RequiredMinRepValue" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="RequiredMaxRepFaction">Req.MaxRepFaction</label>
            <keira-faction-selector-btn
              [config]="{ name: 'RequiredMaxRepFaction' }"
              [control]="editorService.form.controls.RequiredMaxRepFaction"
            ></keira-faction-selector-btn>
            <input
              [formControlName]="'RequiredMaxRepFaction'"
              id="RequiredMaxRepFaction"
              type="number"
              class="form-control form-control-sm"
            />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="RequiredMaxRepValue">Req.MaxRepValue</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The maximum reputation value that the player can have with a faction and still get the quest.'"
            ></i>
            <input [formControlName]="'RequiredMaxRepValue'" id="RequiredMaxRepValue" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>
      <div class="content-block">
        <span class="category-title">Addon Rewards</span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="RewardMailTemplateID">RewardMailTemplateID</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Corresponds to the loot template in quest_mail_loot_template; items will be sent by mail at quest completion'"
            ></i>
            <input
              [formControlName]="'RewardMailTemplateID'"
              id="RewardMailTemplateID"
              type="number"
              class="form-control form-control-sm"
            />
          </div>

          <div class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl-2">
            <label class="control-label" for="RewardMailDelay">RewardMailDelay</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Delay (in seconds) after which the mail is sent to the character (defined in RewardMailTemplateId)'"
            ></i>
            <input [formControlName]="'RewardMailDelay'" id="RewardMailDelay" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>
    </form>

    <keira-quest-preview></keira-quest-preview>
  </div>
</div>
